<template>
  <view class="container">
    <mSearch :mode="2" button="inside" :show="true" @search="search($event,3)"></mSearch>

      <view>
        <uni-list-item direction="column" v-for="item in data" :key="item.id" >
          <!-- 通过header插槽定义列表的标题 -->
          <template v-slot:header>
            <view class="uni-title" @click="goView(item.id)">
				{{item.postTitle}}
			
				<uni-tag style="margin-left: 10px;" text="已出租" v-if="item.postStatus === 1" type="success" :circle="true"></uni-tag>
				<uni-tag style="margin-left: 10px;" text="未出租" v-else type="error" :circle="true"></uni-tag>
			</view> 
          </template>
          <!-- 通过body插槽定义列表内容显示 -->
          <template v-slot:body>
            <view class="uni-list-box">
              <view class="uni-content">
                <view class="uni-title-sub uni-ellipsis-2">
                </view>
                <view class="uni-note">{{item.landlordName}}</view>
                <view class="uni-note">{{item.rentStart + ' 至 '+item.rentEnd}}</view>
              </view>
            </view>
          </template>
        </uni-list-item>

      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';



  export default {
    components: {mSearch},
    data() {
      return {
        val0: '',
        val1: '',
        val2: '',
        val3: '',
        placeholder: '动态占位内容',
        model: {
          searchText: "",
          pageNum: 1,
          pageSize: 10
        },
        data:[],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      };
    },
	onShow() {
		this.data = []
		 this.loadData()
	},
    onLoad() {
     
    },

    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.model.pageNum ++ ;
      this.loadData();
    },
    methods: {
      search(e, val) {
        this.data = [];
        this.model.searchText = e;

        this.loadData();
      },


      goView(id){
        console.log(id)
        uni.navigateTo({
          url: './edit?id=' + id,
          events: {
            // 监听修改页面成功修改数据后, 刷新当前页面数据
            refreshData: () => {
              this.data = [];
              this.loadData()
            }
          }
        })
      },
      loadData() {
        this.$u.api.postInfo.list(this.model).then(res => {
          if(res.code == '200'){
            this.data.push(...res.rows);
          }else{
            this.$u.toast(res.msg);
          }
        });
      },
      load(data, ended) {
        if (ended) {
          this.formData.status = 'noMore'
        }
      },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.data = [];
              this.loadData()
            }
          }
        })
      }





    }
  }
</script>


<style lang="scss">
@import '@/common/uni-ui.scss';






page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f5f5;
  min-height: 100%;
  height: auto;
}

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.content {
  width: 100%;
  display: flex;
}

.list-picture {
  width: 100%;
  height: 145px;
}

.thumb-image {
  width: 100%;
  height: 100%;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
